<template>
  <view :style="colorStyle">
    <view class="wrap fs-mini" :style="{background:vipDetail.detail_bg_color}">
      <view class="head-box">
        <!--     会员卡片-->
        <view class="zero-card highlight"
                :style="{
                  backgroundImage: 'url(' + vipDetail.back_img + ')',
                  backgroundSize: 'cover',
                  color: vipDetail.color
                }"
          >
            <view class="l">
              <view class="name">
                {{vipDetail.title}}
              </view>
              <view class="tip">
                {{vipDetail.product_count}}款包包0元随心租
              </view>
              <view class="fs-24">
                有效期至{{vipDetail.super_expiration_time}}
              </view>
            </view>
            <view class="r">
              <image class="logo" :src="vipDetail.logo" mode="widthFix"></image>
            </view>
          </view>
        <!--     会员权益-->
        <view class="vip-content"  :style="{background:vipDetail.detail_right_bg_color}">
            <view class="title fs-28">
              {{vipDetail.title}}尊享{{Object.keys(vipDetail.pic).length}}大权益
            </view>
            <view class="con">
              <view class="item" v-for="(item, index) in Object.keys(vipDetail.pic)" :key="index">
                <image class="pic" :src="vipDetail.pic[item].pic" mode="widthFix"></image>
                <view class="title mt-10">{{vipDetail.pic[item].name}}</view>
              </view>
            </view>
          </view>
      </view>
  <!--    会员商品-->
      <view class="goods-box">
        <view class="h-88 px-32 flex-between-center relative">
          <view class="text--w111-333 fs-26 fw-500 flex-y-center" @tap="toggleSortable">
            <text>综合排序</text>
            <text class="iconfont icon-ic_down2 fs-14 ml-6"></text>
          </view>
          <view class="text--w111-666 flex-y-center fs-26" @tap='set_where(3)'>
            <text :class="[1,2].includes(stock) ? 'text-primary-con' : ''">销量</text>
            <text v-if="stock==2" class="iconfont icon-ic_down2 fs-14 ml-6 text-primary-con"></text>
            <text v-if="stock==1" class="iconfont icon-ic_up2 fs-14 ml-6 text-primary-con"></text>
            <text v-if="stock==0" class="iconfont icon-ic_down2 fs-14 ml-6"></text>
          </view>
          <view class="text--w111-666 flex-y-center fs-26" @tap='set_where(2)'>
            <text :class="[1,2].includes(price) ? 'text-primary-con' : ''">价格</text>
            <text v-if="price==2" class="iconfont icon-ic_down2 fs-14 ml-6 text-primary-con"></text>
            <text v-if="price==1" class="iconfont icon-ic_up2 fs-14 ml-6 text-primary-con"></text>
            <text v-if="price==0" class="iconfont icon-ic_down2 fs-14 ml-6"></text>
          </view>
          <view class="text--w111-666 flex-y-center fs-26">
            <text class="menu_line"></text>
            <view @tap="showFilterDrawerToggle(true)">筛选</view>
            <text class="iconfont icon-ic_sort pl-8" @tap="showFilterDrawerToggle(true)"></text>
          </view>
          <view class="sortable-box w-full bg--w111-fff rd-b-24rpx z-999" v-if="showSortAbleBox">
            <view class="flex-between-center pb-40"
                  v-for="(item, index) in sortableShowTab" :key="index" @tap="checkSortable(item.value)">
              <text class="fs-26" :class="item.value == where.defaultOrder ? 'text-primary-con' : 'text--w111-333'">{{item.title}}</text>
              <image class="w-28 h-28" :src="require('@/pages/goods/static/dui-icon.png')" v-if="item.value == where.defaultOrder"></image>
            </view>
          </view>

        </view>
        <emptyPage v-if='productList.length == 0' title="暂无商品～" src="/statics/images/empty-box.png"></emptyPage>
        <waterfallsFlow ref="waterfallsFlow" :wfList="productList" @itemTap="goDetail"></waterfallsFlow>
        <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
          <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
        </view>
        <filterDrawer
            :showTitle="false"
            :visible="showFilterDrawer"
            :promotionId="where.promotions_id"
            :brandList="brandList"
            :labelList="labelList"
            :promotionList="promotionList"
            @closeDrawer="showFilterDrawerToggle(false)"
            @filterChange="filterConfirm"></filterDrawer>
      </view>
    </view>
  </view>
</template>

<script>
import {getUserInfo} from "@/api/user";
import {zeroVipDetail, zeroVipGoods} from "@/api/leaseOrder";
import {getProductslist, searchFilterApi} from "@/api/store";
import waterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
import filterDrawer from "@/pages/goods/components/filterDrwer/index.vue";
import colors from "@/mixins/color";
import emptyPage from "@/components/emptyPage.vue";

export default {
  mixins: [colors],
  components: {
    emptyPage,
    filterDrawer,
    waterfallsFlow
  },
  data() {
    return {
      super_id: 0,
      vipDetail:{},

      // start 搜索条件
      where: {
        sid: 0,
        keyword: '',
        priceOrder: '',
        salesOrder: '',
        news: 0,
        page: 1,
        limit: 8,
        cid: 0,
        tid: 0,
        brand_id: '',
        promotions_id: 0,
        promotions_type:0,
        defaultOrder:0,
        super_id:''
      },
      productList:[],
      showSortAbleBox:false,
      price: 0,
      stock: 0,
      nows: false,
      loadend: false,
      loading: false,
      loadTitle: '加载更多',
      sortableShowTab:[
        {title:'综合排序',value:0},
        {title:'好评优先',value:1},
        {title:'新品优先',value:2},
      ],
      is_switch: true,
      showFilterDrawer:false,
      brandList: [],
      promotionList:[],
      labelList:[],
      // end
    }
  },
  onLoad(){
    this.getUserInfo()
  },
  methods:{
    showFilterDrawerToggle(flag){
      this.showFilterDrawer=flag
    },
    // 获取会员id
    getUserInfo(){
      getUserInfo().then(res=>{
        this.super_id=res.data.super_id
        this.where.super_id=this.super_id
        // 容错处理：获取会员id失败
        if(!this.super_id){
          uni.redirectTo({
            url: '/pages/users/zero_bag/index'
          })
        }
        this.zeroVipDetail()
        this.getProductList()
        this.getSearchFilter()
      })
    },
    // 会员详情
    zeroVipDetail(){
      uni.showLoading({
        title: '加载中...'
      })
      zeroVipDetail({
        super_id: this.super_id
      }).then(res=>{
        uni.hideLoading()
        this.vipDetail=res.data[0]

        // 设置标题颜色
        uni.setNavigationBarTitle({
          title: this.vipDetail.title
        })
        uni.setNavigationBarColor({
          frontColor: '#fff',
          backgroundColor: this.vipDetail.detail_bg_color,
        })
      })
    },

    // start 商品列表
    //设置where条件
    setWhere: function() {
      if (this.price == 0) this.where.priceOrder = '';
      else if (this.price == 1) this.where.priceOrder = 'asc';
      else if (this.price == 2) this.where.priceOrder = 'desc';
      if (this.stock == 0) this.where.salesOrder = '';
      else if (this.stock == 1) this.where.salesOrder = 'asc';
      else if (this.stock == 2) this.where.salesOrder = 'desc';
      this.where.news = this.nows ? 1 : 0;
    },
    getProductList(isPage) {
      let that = this;
      that.setWhere();
      if (that.loadend) return;
      if (that.loading) return;
      if (isPage === true) {
        that.$set(that, 'productList', []);
      }
      that.loading = true;
      that.loadTitle = '';
      zeroVipGoods(this.where).then(res => {
        let list = res.data;
        let productList = that.$util.SplitArray(list, that.productList);
        let loadend = list.length < that.where.limit;
        that.loadend = loadend;
        that.loading = false;
        that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
        that.$set(that, 'productList', productList);
        that.$set(that.where, 'page', that.where.page + 1);
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/goods_details/index?id=${item.id}`
      });
    },
    toggleSortable(){
      this.showSortAbleBox = !this.showSortAbleBox;
    },
    //点击事件处理
    set_where: function(e) {
      switch (e) {
        case 1:
          // #ifdef H5
          return history.back();
          // #endif
          // #ifndef H5
          return uni.navigateBack({
            delta: 1,
          })
          // #endif
          break;
        case 2:
          if (this.price == 0) this.price = 1;
          else if (this.price == 1) this.price = 2;
          else if (this.price == 2) this.price = 0;
          this.stock = 0;
          break;
        case 3:
          if (this.stock == 0) this.stock = 1;
          else if (this.stock == 1) this.stock = 2;
          else if (this.stock == 2) this.stock = 0;
          this.price = 0
          break;
        case 4:
          this.nows = !this.nows;
          break;

      }
      this.loadend = false;
      this.$set(this.where, 'page', 1);
      this.getProductList(true);
    },
    checkSortable(val){
      this.where.defaultOrder = val;
      this.showSortAbleBox = false;
      this.loadend = false;
      this.$set(this.where, 'page', 1);
      this.getProductList(true);
    },
    filterConfirm(data){
      this.showFilterDrawer = false;
      Object.assign(this.where,data);
      this.loadend = false;
      this.$set(this.where, 'page', 1);
      this.getProductList(true);
    },
    // 筛选
    getSearchFilter() {
      let data = {
        keyword: this.where.keyword,
        cid: this.where.cid,
        sid: this.where.sid,
        tid: this.where.tid,
        productId: this.where.productId,
        promotions_type: this.where.promotions_type,
        // promotions_id: this.where.promotions_id
      };
      searchFilterApi(data).then(res => {
        this.brandList = res.data.brand;
        this.labelList = res.data.store_label;
        this.promotionList = res.data.promotions;
      }).catch(err => {
        return this.$util.Tips({
          title: err.msg
        });
      })
    },
    // end
  },
  onReachBottom() {
    if (this.productList.length > 0) {
      this.getProductList();
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes shine {
  from {
    left: -50%;
  }
  to {
    left: 100%;
  }
}
.wrap{
  padding-top: 80rpx;
}
.head-box{
  padding: 0 20rpx;
}
.zero-card {
  position: relative;
  width: 100%;
  height: 330rpx; /* 或根据需要设置高度 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 30rpx;
  margin-bottom: 50rpx;
  display: flex;
  justify-content: space-between;

  //高亮效果
  overflow: hidden;
  &.highlight::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200rpx;
    background: linear-gradient(
            transparent 25%,
            rgba(255, 255, 255, 0.5),
            transparent 75%
    );
    transform: rotate(-45deg);
    animation: shine 2s infinite ease-in-out;
    pointer-events: none;
  }
  .check-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 130rpx;
    height: 42rpx;
    background-color: rgba(145, 145, 145, 0.5);
    border-top-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    font-size: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont{
      margin-right: 10rpx;
      font-size: 26rpx;
    }
  }
  .l{
    flex: 1;
    padding-top: 80rpx;
    padding-left: 50rpx;
    .name{
      font-size: 38rpx;
      font-weight: bold;
      font-style: italic;
      margin-bottom: 10rpx;
    }
    .tip{
      font-size: 24rpx;
      margin-bottom: 46rpx;
    }
    .price{
      font-size: 36rpx;
      .year{
        font-size: 22rpx;
      }
    }
  }
  .r{
    padding-top: 20rpx;
    padding-right: 20rpx;
    .logo{
      width: 200rpx;
    }
  }
}
.vip-content{
  border-radius: 20rpx;
  color: #fff;
  padding: 30rpx 30rpx 80rpx;
  .con{
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    .item{
      display:flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
      margin-bottom: 20rpx;
      image{
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
}
.goods-box{
  background: #fff;
  border-radius: 20rpx;
  position: relative;
  z-index: 10;
  top: -50rpx;
  padding-left: 16rpx;
  padding-bottom: 100rpx;
  .sortable-box{
    padding: 32rpx 32rpx 0;
    position: absolute;
    top: 88rpx;
    left: 0;
  }
}
</style>